<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <style>
        body {
            margin: 30px;
        }

        button {
            margin-right: 10px;
        }

        .list-item {
            display: inline-block;
            margin-right: 10px;
        }

        .list-enter-active,
        .list-leave-active {
            transition: all 1s ease;
        }

        .list-enter-from,
        .list-leave-to {
            opacity: 0;
            transform: translateY(30px);
        }
    </style>
    <script src='./vue.global.js'></script>
</head>

<body>
    <div id="list-demo">
        <button @click="add">Add</button>
        <button @click="remove">Remove</button>
        <transition-group name="list" tag="p">
            <span v-for="item in items" :key="item" class="list-item">
                {{ item }}
            </span>
        </transition-group>
    </div>
    <script>
        const Demo = {
            data() {
                return {
                    items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
                    nextNum: 10
                }
            },
            methods: {
                randomIndex() {
                    return Math.floor(Math.random() * this.items.length)
                },
                add() {
                    this.items.splice(this.randomIndex(), 0, this.nextNum++)
                },
                remove() {
                    this.items.splice(this.randomIndex(), 1)
                }
            }
        }

        Vue.createApp(Demo).mount('#list-demo')
    </script>
</body>

</html>